<!DOCTYPE html>
<html>
<head>
    <title>评论</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/queryAndBlankComment.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script src="/js/plugins/mdialog/mDialog.js"></script>
    <link rel="stylesheet" href="/css/dialog.css"/>
    <script>
        $(function () {
            var params = getParams();//获取路径上的参数
            var title;//文章标题
            var parentId;//一级评论的id

            //get请求获取到当前的攻略点评模块
            $.get(baseUrl + '/strategyComments', {id: params.id}, function (data) {
                title = data.content;
                console.log(data);
                $("#strategyComment").renderValues(data, {
                    getHref: getHref
                });
            })

            //查询评论的 填充数据的方法,queryUrl是查询的请求资源,obj是被进行数据渲染的jQuery对象
            function queryAndBlankForComment(queryUrl, obj) {
                if (loading) {
                    //当有查询任务在进行时,关闭可查询开关
                    loading = false;
                    $.get(queryUrl, {currentPage: currentPage}, function (data) {
                        console.log(data);
                        //合并两个数组到第一个数组上
                        $.merge(travels, data.list);
                        //将travels数组再进行包装,主要将它封装到list变量中,便于渲染时读取变量
                        var json = {list: travels};
                        //使用jrender进行数据渲染
                        obj.renderValues(json, {
                            getHref: getHref
                        });
                        //当前页自增
                        currentPage++;
                        //总页数
                        pages = data.pages;
                        //当查询结束之后,打开查询开关
                        loading = true;
                        // 点击回复按钮弹出输入框
                        $(".btn-reply").click(function () {
                            inputComment();
                            parentId = $(this).val();
                            console.log(parentId);
                        });
                    });
                }
            }

            //进来先查询第一页
            queryAndBlankForComment(baseUrl + '/comments/' + params.id + '/4', $('#comment'));
            //点击加载按钮,加载下一页
            $("#loadBtn").click(function () {
                if (currentPage <= pages) {
                    queryAndBlankForComment(baseUrl + '/comments/' + params.id + '/4', $('#comment'));
                    var toast5 = $(document).dialog({
                        type: 'toast',
                        infoIcon: '/img/icon/loading.gif',
                        infoText: '正在加载中',
                    });

                    setTimeout(function () {
                        toast5.update({
                            infoIcon: '/img/icon/success.png',
                            infoText: '加载成功',
                            autoClose: 700,
                        });
                    }, 2000);
                } else {
                    $(document).dialog({
                        type : 'toast',
                        infoIcon: '/img/icon/fail.png',
                        infoText: '没有更多内容了!',
                        autoClose: 1500
                    });
                    $("#loadBtn").html("没有更多评论了!");
                }
            });

            //评论的窗口方法
            function inputComment() {
                Dialog.init('<input  type="text" placeholder="请输入你的评论"  style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/>', {
                    title: '输入点什么吧！',
                    button: {
                        确定: function () {
                            if (this.querySelector('input').value.length >= 5) {
                                var content = this.querySelector('input').value;//取当前输入的评论设置到表单中
                                var currentId = user.id;//当前评论的用户id
                                var articleId = params.id;//文章的id
                                var articleTitle = title;//文章标题
                                var modelState = 4;//模块类型

                                var comment = {
                                    parentId: parentId,
                                    content: content,
                                    "user.id": currentId,
                                    "article.id": articleId,
                                    "article.title": articleTitle,
                                    modelState: modelState
                                }
                                $.post(baseUrl + '/comments', comment, function (data) {
                                    if (data.success) {
                                        //提示
                                        Dialog.init('评论成功', 1000);
                                        Dialog.close(this);
                                        setTimeout(function () {
                                            window.location.reload();
                                        }, 900);
                                    } else {
                                        $(document).dialog({
                                            type: 'alert',
                                            content: data.errorMsg,
                                            autoClose: 2000
                                        });
                                    }
                                })
                            } else {
                                Dialog.init('要求5个字符以上的评论', 1100);
                            }
                            ;
                        },
                        关闭: function () {
                            Dialog.close(this);
                        }
                    }
                });
            }

            //点击评论按钮
            $("#commentBtn").click(function () {
                parentId = '';
                inputComment();
            });

        })
    </script>
</head>

<body>

<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);" style="position: absolute;left: 10px;">
                <span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
            </a>
        </div>
        <div class="col">
            <span>攻略点评评论</span>
        </div>
        <div class="col"></div>
    </div>
</div>
<br>
<div id="strategyComment">
    <div>
        <div class="container row comment">
            <div class="col-2 comment-head">
                <a render-fun="getHref" render-key="user.id" data-url="/userProfiles.html?id=">
                    <img class="rounded-circle" render-src="user.headImgUrl">
                </a>
            </div>
            <div class="col comment-right">
                <a style="font-size: 10px;color: #61CAD0" data-url="/userProfiles.html?id="
                   render-fun="getHref" render-key="user.id"
                   render-html="user.nickName">骡窝窝官方</a>
                <span class="comment-date" render-html="createTime">2018-07-19</span>
                <div class="comment-content">
                    <p render-html="content">我觉得很好</p>
                </div>
                <ul class="comment-img" render-loop="imgUrlsArr">
                    <li>
                        <img render-src="imgUrlsArr.self">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<hr>
<div class="row" id="comment">
    <div render-loop="list">
        <div class="row">
            <div class="col-1"></div>
            <div class="col-2 comment-head">
                <a render-fun="getHref" render-key="list.user.id" data-url="/userProfiles.html?id=">
                    <img class="rounded-circle"
                         render-src="list.user.headImgUrl">
                </a>
            </div>
            <div class="col">
                <a style="font-size: 10px;color: #61CAD0" render-html="list.user.nickName">喵喵</a>
                <span class="comment-date" render-html="list.commentTime">2019-5-30</span>
                <button class="btn btn-info btn-xs btn-reply" render-value="list.id">回复</button>
                <div class="comment-content">
                    <p render-html="list.content">这里评论内容</p>
                </div>
                <hr/>

                <div id="commentReplyBtn">
                    <div render-loop="list.subComments">
                        <div class="row">
                            <div class="col-2 comment-head">
                                <a data-url="/userProfiles.html?id=" render-key="list.subComments.user.id"
                                   render-fun="getHref">
                                    <img class="rounded-circle" render-src="list.subComments.user.headImgUrl">
                                </a>
                            </div>
                            <div class="col">
                                <a style="font-size: 10px;color: #61CAD0"
                                   render-html="list.subComments.user.nickName">沙雕</a>
                                <span class="comment-date" render-html="list.subComments.commentTime">2019-09-09</span>
                                <div class="comment-content">
                                    <p render-html="list.subComments.content">我都我的</p>
                                </div>
                                <hr/>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="operation">
    <button class="btn btn-success" id="loadBtn">加载更多</button>
    <button class="btn btn-success" id="commentBtn">评论</button>
</div>
</body>
</html>